<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])

const initEcharts = ((item) => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      "xAxis": {
        "type": "category",
        "axisLabel": {
          "interval": 0,
        }
      },
      "yAxis": {
        "type": "value",
        "splitLine": {
          "show": false
        }
      },
      "grid": {
        "left": 20,
        "right": 20,
        "top": 80,
        "bottom": 40
      },
      "tooltip": {
        "trigger": "axis",
        "axisPointer": {
          "type": "shadow"
        }
      },
      "legend": {
        "left": 20,
        "top": 20
      },
      "dataset": {
        "source": [
          [
            "",
            "总需求",
            "已解决需求"
          ],
          [
            "2022-06",
            26.947840915347587,
            23.434275047578243
          ],
          [
            "2022-07",
            86.81567149391756,
            5.657076223365802
          ],
          [
            "2022-08",
            19.66516804789249,
            21.65491007516144
          ],
          [
            "2022-09",
            78.24499918224117,
            17.532816749568585
          ],
          [
            "2022-10",
            9.068230301905844,
            18.72748416004701
          ],
          [
            "2022-11",
            97.12694214494779,
            4.426496960413959
          ],
          [
            "2022-12",
            51.36793101571185,
            14.31612203508518
          ]
        ]
      },
      "color": [
        "#96acd0",
        "#7dddea"
      ],
      "series": [
        {
          "type": "bar",
          "miniBarWidth": 20,
          "z": "-1",
          "barGap": "-100%"
        },
        {
          "type": "bar",
          "miniBarWidth": 20
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})
watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  initEcharts(props.tableData)
})

</script>

<style lang="less" scoped>
</style>
